<template>
  <div class="clock-separator" :style="clockSeparatorStyle">
    <div></div>
    <div></div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  // 颜色
  color: {
    type: String,
    default: "#333",
  },
  // 缩放比例
  scale: {
    type: Number,
    default: 1,
  },
});

/**
 * 翻转卡片引用
 */
const flipCardRef = ref(null);

/**
 * 默认样式
 */
const defaultStyle = {
  width: 20,
  height: 10,
  borderRadius: 4,
  padding: 10,
};

/**
 * 计算缩放后的尺寸
 * @param scale 缩放比例
 */
function calculateDimensions() {
  return {
    width: defaultStyle.width * props.scale,
    height: defaultStyle.height * props.scale,
    borderRadius: defaultStyle.borderRadius * props.scale,
    padding: defaultStyle.padding * props.scale,
  };
}

/**
 * 样式
 */
const clockSeparatorStyle = computed(() => {
  const dimensions = calculateDimensions();
  return {
    "--clock-separator-width": dimensions.width + "px",
    "--clock-separator-height": dimensions.height + "px",
    "--clock-separator-background-color": props.color,
    "--clock-separator-border-radius": dimensions.borderRadius + "px",
    "--clock-separator-padding": dimensions.padding + "px",
  };
});
</script>
<style scoped lang="scss">
.clock-separator {
  padding-left: var(--clock-separator-padding);
  padding-right: var(--clock-separator-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  div {
    height: var(--clock-separator-width);
    width: var(--clock-separator-height);
    background-color: var(--clock-separator-background-color);
    border-radius: var(--clock-separator-border-radius);
  }
}
</style>
